var num = 1,
	OTI = true,
	ITO = false,
	outerScrollObj,
	innerScrollObj,
	pullToRefreshObj,
	contentOffsetTop = 45,
	scrollAndPullToRefreshInit = false,
	innerScroll = '.inner>.mui-scroll',
	fullDiv = document.createElement('div'),
	outerWrapper = '.mui-scroll-wrapper.outer',
	innerWrapper = '.mui-scroll-wrapper.inner',
	outerTopHeight = document.querySelector("#outerTopBox") ? document.querySelector("#outerTopBox").clientHeight : 200,
	scrollOption = {
		scrollY: true,
		scrollX: false,
		bounce: true,
		indicators: false, //是否显示滚动条
		deceleration: 0.0006
	};

if (mui.os.ios) {
	scrollOption.deceleration = 0.003;
}

// 初始化内外部滚动 和 上拉加载
function initScrollAndPullToRefresh() {
	fullDiv.setAttribute('style', 'position: fixed; bottom: 0; left: 0; top: 0;');
	fullDiv.setAttribute('id', 'fullH');
	document.body.appendChild(fullDiv);
	
	var fullscreen = fullDiv.clientHeight - contentOffsetTop;
	document.querySelector(innerWrapper).style.height = fullscreen + 'px';
	
	pullToRefreshObj = mui(innerScroll).pullToRefresh({
		up: {
			height: 50, 					//可选.默认50.触发上拉加载拖动距离
			auto: false, 					//可选,默认false.自动上拉加载一次
			contentrefresh: "正在加载...", 	//可选，正在加载状态时，上拉加载控件上显示的标题内容
			contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
			callback: function() {  		//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				pullfreshCallback();
			}
		}
	});
	
	// scrollOption.bounce = true;
	// 初始化内部滚动
	innerScrollObj = mui(innerWrapper).scroll(scrollOption);
	
	// 初始化外部滚动
	scrollOption.bounce = false;
	outerScrollObj = mui(outerWrapper).scroll(scrollOption);
	
	changeInnerEventListner('remove');
	
	// 添加外部区域滚动事件监听
	document.querySelector(outerWrapper).addEventListener('scroll', outerToInner, false);
	
	scrollAndPullToRefreshInit = true;
}

function outerToInner() {
	document.querySelector('#outerY').innerHTML = 'outerY：' + outerScrollObj.y
	if (OTI && outerScrollObj.y <= (0 - outerTopHeight)) {
		// outerScroll.scrollTo(0, -200, 100);
		changeOuterEventListner('remove');
		
		changeInnerEventListner('add');
		
		changeIOScrollListner("OTI");
	}
}

function innerToOuter() {
	document.querySelector('#innerY').innerHTML = 'innerY：' + innerScrollObj.y;
	if (ITO && innerScrollObj.y >= 0) {
		// innerScroll.scrollTo(0, 0, 100);
		changeInnerEventListner('remove');
		
		changeOuterEventListner('add');
		
		changeIOScrollListner("ITO");
	}
}

// 添加 或 取消 内部滚动区域 滚动监听 和 上拉加载监听
function changeInnerEventListner(type) {
	if ('add' == type) {
		// 添加内部 滚动 和 推拽 的监听
		document.querySelector(innerWrapper).addEventListener('drag', innerScrollObj);
		window.addEventListener('scroll', innerScrollObj);

		// 添加内部上拉加载有关的 上拉拖拽 和 滚动 监听
		document.querySelector(innerScroll).addEventListener('dragup', pullToRefreshObj);
		window.addEventListener('scroll', pullToRefreshObj);
	} else if ('remove' == type) {
		// 取消内部 滚动 和 推拽 的监听
		document.querySelector(innerWrapper).removeEventListener('drag', innerScrollObj);
		window.removeEventListener('scroll', innerScrollObj);

		// 取消内部上拉加载有关的 上拉拖拽 和 滚动 监听
		document.querySelector(innerScroll).removeEventListener('dragup', pullToRefreshObj);
		window.removeEventListener('scroll', pullToRefreshObj);
	}
}

// 添加 或 取消 外部滚动区域 滚动监听
function changeOuterEventListner(type) {
	if ('add' == type) {
		document.querySelector(outerWrapper).addEventListener('drag', outerScrollObj);
		window.addEventListener('scroll', outerScrollObj);
	} else if ('remove' == type) {
		document.querySelector(outerWrapper).removeEventListener('drag', outerScrollObj);
		window.removeEventListener('scroll', outerScrollObj);
	}
}

// 切换内部外部滚动监听
function changeIOScrollListner(type) {
	if ('ITO' == type) {
		OTI = true;
		ITO = false;
		setTimeout(function() {
			document.querySelector(innerWrapper).removeEventListener('scroll', innerToOuter, false);
			document.querySelector(outerWrapper).addEventListener('scroll', outerToInner, false);
		}, 1);
	} else if ('OTI' == type) {
		ITO = true;
		OTI = false;
		setTimeout(function() {
			document.querySelector(outerWrapper).removeEventListener('scroll', outerToInner, false);
			document.querySelector(innerWrapper).addEventListener('scroll', innerToOuter, false);
		}, 1);
	}
}
